<template>
    <div class="login">
        <h1>登录</h1>
        <div class="login-wrapper">
            <div class="avater">
                <img alt=""
                     src="https://img0.baidu.com/it/u=671112370,873229032&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1720630800&t=1bdd5887bded9e75b8be9722a9994db3">
            </div>

            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" :rules="[{ required: true, message: '请填写用户名' }]" label="用户名" name="username"
                               placeholder="用户名"/>
                    <van-field v-model="password" :rules="[{ required: true, message: '请填写密码' }]" label="密码" name="password" placeholder="密码"
                               type="password"/>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button block native-type="submit" round type="primary">
                        登入
                    </van-button>
                </div>
            </van-form>

        </div>

        <p class="register" @click="() => router.push('/register')">新用户？点击这里注册</p>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import axios from '@/api'
import router from '@/router';

const username = ref('')
const password = ref('')


// 登录
const onSubmit = async (values) => {
    // console.log(values);
    const res = await axios.post('/user/login', {
        username: values.username,
        password: values.password
    })
    // console.log(res);
    localStorage.setItem('userInfo', JSON.stringify(res.data))
    localStorage.setItem('token', res.token)

    router.push('/noteClass')
}
</script>

<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding: 0 0.3rem;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;

    h1 {
        height: 0.6933rem;
        text-align: center;
        font-size: 0.48rem;
        margin-top: 1.12rem;
    }

    .login-wrapper {
        width: 7.44rem;
        height: 10.77rem;
        border: 1px solid rgba(187, 187, 187, 1);
        margin: 0 auto; // 块级元素水平居中
        margin-top: 1.7rem;
        border-radius: 0.3rem;
        box-shadow: 0 0 0.533rem rgba(170, 170, 170, 1); // 第三个参数阴影的扩散范围，（第四个参数是阴影宽度）第四个参数阴影的颜色，

        .avater {
            width: 2.4rem;
            height: 2.4rem;
            margin: 1rem auto 0.77rem;
            border-radius: 50%;
            overflow: hidden;

            img {
                width: 100%;
            }
        }
    }

    .register {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translate(-50%);
        font-size: 0.374rem;
        color: rgba(16, 16, 16, 1);
    }
}

:deep(.van-cell__title.van-field__label) {
    width: 45px;
}
</style>